/*
 This file 'zdwxy_1' is part of Firebird Integrated Solution 1.0

 Copyright (c) 2020 Lincong

 Contact:  
        Email: lincong1987@gmail.com

        QQ: 159257119
 
 See Usage at http://www.jplatformx.com/firebird

 Create date: 2020-06-14 20:49
 */

define(function (require, exports, module) {

	require("../model/Chart");

	echarts.registerMap('china', require("../assets/map/json/china.json"))

	var ArrayUtils = require("../assets/ArrayUtils");

	var id = "zdwxy_2";

	Firebird.define(id, {
		extend: "Chart",
		setValue: function (data) {


			/**
			 * 绘制左侧面
			 */
			var CubeLeft = echarts.graphic.extendShape({
				shape: {
					x: 0,
					y: 0
				},
				buildPath: function (ctx, shape) {
					var api = shape.api;
					// 会canvas的应该都能看得懂，shape是从custom传入的

					var location = api.coord([0, shape.yValue]);
					ctx
						.moveTo(shape.x - 20, shape.y)
						.lineTo(shape.x + 10 - 20, shape.y - 20)

						.lineTo(location[0] + 10, location[1] - 20)
						.lineTo(location[0], location[1])
						.closePath();
				}
			});

			/**
			 * 绘制右侧面
			 */
			var CubeRight = echarts.graphic.extendShape({
				shape: {
					x: 0,
					y: 0
				},
				buildPath: function (ctx, shape) {
					var api = shape.api;
					// 会canvas的应该都能看得懂，shape是从custom传入的
					var location = api.coord([0, shape.yValue]);
					ctx
						.moveTo(shape.x - 20, shape.y)
						.lineTo(shape.x + 10 - 20, shape.y + 20)
						.lineTo(location[0] + 10, location[1] + 20)
						.lineTo(location[0], location[1])
						.closePath();


				}
			});

			/**
			 * 绘制顶面
			 */
			var CubeTop = echarts.graphic.extendShape({
				shape: {
					x: 0,
					y: 0
				},
				buildPath: function (ctx, shape) {
					var api = shape.api;
					ctx
						.moveTo(shape.x - 20, shape.y)
						.lineTo(shape.x + 10 - 20, shape.y + 20)
						.lineTo(shape.x + 20 - 20, shape.y)
						.lineTo(shape.x + 10 - 20, shape.y - 20)
						.closePath();
				}
			});

			// 注册三个面图形
			echarts.graphic.registerShape(id + 'CubeLeft', CubeLeft);
			echarts.graphic.registerShape(id + 'CubeRight', CubeRight);
			echarts.graphic.registerShape(id + 'CubeTop', CubeTop);


			// 背景最大值
			var dataMax = [
				{
					value: 100,
				}, {
					value: 100,
				}
			];
			/**
			 * 棱柱数值及颜色配置
			 * [
					72, // 数值
			        // 背景 左, 右, 中
					"rgba(194, 157, 58, 0.3)", "rgba(194, 157, 58, 0.3)", "rgba(194, 157, 58, 0.3)",
					// 棱柱 左, 右, 中
			 		"rgba(194, 157, 58, 1)", "rgba(172, 137, 43, 1)", "rgba(127, 107, 63, 1)"

				]
			 * @type {(number|string)[][]}
			 */
			var data = [
				{
					value: 100,
					color: [
						"red", "red", "red", "green", "blue", "yellow"
					],
					color: [
						"rgba(33, 97, 229, 1)", "rgba(33, 97, 229, 1)", "rgba(33, 97, 229, 1)",
						Chart.linearGradient("rgba(116, 105, 243, 1)", "rgba(66, 119, 255, 1)", [1, 1, 0, 0]),
						Chart.linearGradient("rgba(97, 81, 240, 1)", "rgba(65, 121, 251, 1)", [1, 1, 0, 0]),
						Chart.linearGradient("rgba(103, 106, 240, 1)", "rgba(97, 105, 238, 1)", [1, 1, 0, 0]),
					]
				},

				{
					value: 21,
					color: [
						"rgba(33, 97, 229, 1)", "rgba(33, 97, 229, 1)", "rgba(33, 97, 229, 1)",
						Chart.linearGradient("rgba(116, 105, 243, 1)", "rgba(66, 119, 255, 1)", [1, 1, 0, 0]),
						Chart.linearGradient("rgba(97, 81, 240, 1)", "rgba(65, 121, 251, 1)", [1, 1, 0, 0]),
						Chart.linearGradient("rgba(103, 106, 240, 1)", "rgba(97, 105, 238, 1)", [1, 1, 0, 0]),
					]
				}
			];

			var option = {
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'shadow'
					},
					formatter: function (params, ticket, callback) {
						var item = params[1]
						return item.name + ' : ' + item.value;
					}
				},
				grid: {
					left: 40,
					right: 30,
					bottom: 30,
					top: 30,
					containLabel: true
				},
				yAxis: {
					//type: 'category',
					data: ['生产单元', '存储单元'],  // ,
					axisLine: {
						show: false,
						lineStyle: {
							color: 'white'
						}
					},
					offset: 10,
					axisTick: {
						show: false
					},
					axisLabel: {
						show: true,
						fontSize: 16,
						color: "rgba(255, 255, 255, 1)"
					}
				},
				xAxis: {
					type: 'value',
					axisLine: {
						show: false,
						lineStyle: {
							color: 'white'
						}
					},
					splitLine: {
						show: false
					},
					axisTick: {
						show: false
					},
					axisLabel: {
						show: false,
						fontSize: 16,
						color: "rgba(255, 255, 255, 1)"
					},
				},
				series: [
					// 棱柱背景
					{
						// 棱柱背景
						type: 'custom',
						renderItem: function (params, api) {
							var location = api.coord([api.value(0), api.value(1)]);
							console.log(location)
							var color = data[params.dataIndex].color;

							return {
								type: 'group',
								children: [
									{
										type: id + 'CubeLeft',
										shape: {
											api: api,
											xValue: api.value(0),
											yValue: api.value(1),
											x: location[0],
											y: location[1]
										},
										style: {
											fill: color[0]
										}
									}, {
										type: id + 'CubeRight',
										shape: {
											api: api,
											xValue: api.value(0),
											yValue: api.value(1),
											x: location[0],
											y: location[1]
										},
										style: {
											fill: color[1]
										}
									}, {
										type: id + 'CubeTop',
										shape: {
											api: api,
											xValue: api.value(0),
											yValue: api.value(1),
											x: location[0],
											y: location[1]
										},
										style: {
											fill: color[2]
										}
									}
								]
							}
						},
						data: dataMax
					}, // 棱柱高亮
					{
						type: 'custom',
						renderItem: function (params, api) {
							var location = api.coord([api.value(0), api.value(1)]);

							var color = data[params.dataIndex].color;

							return {
								type: 'group',
								children: [
									{
										type: id + 'CubeLeft',
										shape: {
											api: api,
											xValue: api.value(0),
											yValue: api.value(1),
											x: location[0],
											y: location[1]
										},
										style: {
											fill: color[3],

										}
									}, {
										type: id + 'CubeRight',
										shape: {
											api: api,
											xValue: api.value(0),
											yValue: api.value(1),
											x: location[0],
											y: location[1]
										},
										style: {
											fill: color[4],
										}
									}, {
										type: id + 'CubeTop',
										shape: {
											api: api,
											xValue: api.value(0),
											yValue: api.value(1),
											x: location[0],
											y: location[1]
										},
										style: {
											fill: color[5],
										}
									}
								]
							}
						},
						data: data
					}, // 顶部文字
					{
						type: 'bar',
						itemStyle: {
							color: 'transparent'
						},
						tooltip: {},
						data: data.map(function (node) {

							node.label = {
								normal: {
									show: true,
									position: "insideRight",
									distance: node.value > 70 ? 20 : -60,
									fontSize: 16,
									color: '#fff',
									formatter: function (node) {
										return "{num|" + node.value + "} {unit|个}"
									},
									rich: {
										num: {
											fontWeight: "bold",
											fontSize: 30, //fontFamily: "DINPro-Bold, Microsoft YaHei'",
											color: "rgba(82, 255, 253, 1)"
										},
										unit: {
											fontSize: 16,
											color: "#fff"
										},
									}
								},
							};


							return node;
						})
					}
				]
			}

			this.clear();
			this.setOption(option, true);
		},
	});

	module.exports = Firebird.create(id, {id: id});
});